import { recordRangeInit } from '@/services/api/api-assess-week-emphasize-exhibition';
import { ActionType, DrawerForm, ModalForm } from '@ant-design/pro-components';
import { Alert, Button, Divider, Spin } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';
import DragSortExhibition from './DragSortExhibition';
dayjs.extend(customParseFormat);

interface TableExhibitionProps {}

const TableExhibition: React.FC<TableExhibitionProps> = ({}) => {
  const access = useAccess();

  const [recordRangeInitData, setRecordRangeInitDataState] =
    useState<AssessWeekEmphasizeExhibitionData.RecirdRangeInitSo>();

  const actionRefProList3 = useRef<ActionType>();
  const actionRefTable3 = useRef<ActionType>();

  const actionRefProList4 = useRef<ActionType>();
  const actionRefTable4 = useRef<ActionType>();

  /**
   * 获取 初始化 数据
   * @param key
   */
  const loadRankInit = async () => {
    try {
      const response = await recordRangeInit();
      if (response.code === 0) {
        const data = response.data;
        setRecordRangeInitDataState(data);
      }
    } catch (error) {}
  };

  return (
    <DrawerForm
      key="table_assess_exhibition_exhibition_record"
      title={'三好作品展览'}
      drawerProps={{
        width: 1100,
        maskClosable: true,
        destroyOnClose: true,
        extra: (
          <ModalForm
            key={'modal_form_release_state_discard'}
            autoFocusFirstInput
            trigger={
              <Alert
                message={
                  <>
                    展示地址：
                    <a>三好作品</a>
                  </>
                }
                type="info"
                showIcon
              />
            }
            title={
              <Alert
                message={
                  <>
                    展示地址：
                    <a target={'_blank'} href="https://assess.ljsyy.net">
                      三好作品
                    </a>
                  </>
                }
                type="info"
                showIcon
                style={{
                  width: '300px',
                }}
              />
            }
            modalProps={{
              width: '650px',
              destroyOnClose: true,
            }}
            submitter={false}
          >
            <iframe src="https://assess.ljsyy.net" height="900" width="100%" frameBorder="0" />
          </ModalForm>
        ),
      }}
      layout="horizontal"
      trigger={<Button type="primary">三好作品展览</Button>}
      submitter={false}
      onOpenChange={(visible: boolean) => {
        if (visible) {
          loadRankInit();
        } else {
        }
      }}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={recordRangeInitData == undefined}
      >
        {recordRangeInitData && (
          <>
            <DragSortExhibition
              dragSort={access.传播质效x配置x管理员}
              actionRefProList={actionRefProList3}
              actionRefTable={actionRefTable3}
              type={3}
              rangeId={recordRangeInitData?.rangeMonthId}
              onRefurbish={() => {}}
              onExhibitionRefurbish={() => {
                loadRankInit();
                actionRefProList4?.current?.reloadAndRest();
                actionRefTable4?.current?.reloadAndRest();
              }}
            />
            <Divider />
            <DragSortExhibition
              dragSort={access.传播质效x配置x管理员}
              actionRefProList={actionRefProList4}
              actionRefTable={actionRefTable4}
              type={4}
              rangeId={recordRangeInitData?.rangeWeekId}
              onRefurbish={() => {}}
              onExhibitionRefurbish={() => {
                loadRankInit();
                actionRefProList3?.current?.reloadAndRest();
                actionRefTable3?.current?.reloadAndRest();
              }}
            />
          </>
        )}
      </Spin>
    </DrawerForm>
  );
};
export default TableExhibition;
